<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
	</head>
	<body>
		
		<h1>1-基本的按钮组</h1>
		<div class="btn-group">
		  <button type="button" class="btn btn-default">按钮 1</button>
		  <button type="button" class="btn btn-default">按钮 2</button>
		  <button type="button" class="btn btn-default">按钮 3</button>
		</div>

		<h1>2-按钮工具栏</h1>
		<div class="btn-toolbar" role="toolbar">
			<div class="btn-group">
				<button type="button" class="btn btn-default">按钮 1</button>
				<button type="button" class="btn btn-default">按钮 2</button>
				<button type="button" class="btn btn-default">按钮 3</button>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-default">按钮 4</button>
				<button type="button" class="btn btn-default">按钮 5</button>
				<button type="button" class="btn btn-default">按钮 6</button>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-default">按钮 7</button>
				<button type="button" class="btn btn-default">按钮 8</button>
				<button type="button" class="btn btn-default">按钮 9</button>
			</div>
		</div>

		<h1>3-按钮的大小</h1>
		<div class="btn-group btn-group-lg">
			<button type="button" class="btn btn-default">按钮 1</button>
			<button type="button" class="btn btn-default">按钮 2</button>
			<button type="button" class="btn btn-default">按钮 3</button>
		</div>
		<div class="btn-group btn-group-sm">
			<button type="button" class="btn btn-default">按钮 4</button>
			<button type="button" class="btn btn-default">按钮 5</button>
			<button type="button" class="btn btn-default">按钮 6</button>
		</div>
		<div class="btn-group btn-group-xs">
			<button type="button" class="btn btn-default">按钮 7</button>
			<button type="button" class="btn btn-default">按钮 8</button>
			<button type="button" class="btn btn-default">按钮 9</button>
		</div>

		<h1>4-嵌套按钮组</h1>
		<div class="btn-group">
			<button type="button" class="btn btn-default">按钮 1</button>
			<button type="button" class="btn btn-default">按钮 2</button>
		
			<div class="btn-group">
				<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			      下列
			      <span class="caret"></span>
			    </button>
				<ul class="dropdown-menu">
					<li>
						<a href="#">下拉链接 1</a>
					</li>
					<li>
						<a href="#">下拉链接 2</a>
					</li>
				</ul>
			</div><!-- end of nested btn-group -->
		</div>
		
		<h1>5-垂直按钮组</h1>
		<pre>
			&lt;div class="btn-group-vertical"&gt;中添加btn-group-vertical
		</pre>
		<div class="btn-group-vertical">
			<button type="button" class="btn btn-default">按钮 1</button>
			<button type="button" class="btn btn-default">按钮 2</button>
		
			<div class="btn-group-vertical">
				<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		      下拉
		      <span class="caret"></span>
		    </button>
				<ul class="dropdown-menu">
					<li>
						<a href="#">下拉链接 1</a>
					</li>
					<li>
						<a href="#">下拉链接 2</a>
					</li>
				</ul>
			</div>
		</div>


		
	</body>
</html>
